<script setup lang="ts">
import { useAppsStore } from '@/stores/modules/app'
import userApi from '@/service/api/user'

const useStore = useAppsStore()
const { doUserInfo } = useStore
const { getUserInfo: userInfo } = storeToRefs(useStore)
const sizeRuler = ref<any>()
let timer: any = null
const handleMouseLeave = () => {
  timer = setTimeout(() => {
    if (sizeRuler.value && sizeRuler.value.style) {
      sizeRuler.value.style.display = 'none'
    }
  }, 200)
}
const handMouseOut = () => {
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
  if (sizeRuler.value && sizeRuler.value.style) {
    sizeRuler.value.style.display = ''
  }
}
const router = useRouter()
const handOut = () => {
  useStore.signOut()
  router.replace({
    path: '/'
  })
}
let requestLoading = false
const handSign = async () => {
  if (userInfo.value.is_sign) return
  if (requestLoading) return
  requestLoading = true
  try {
    const { code, msg } = await userApi.sign()
    if (code !== 0) {
      return msgUtil.$message.error(msg)
    }
    await doUserInfo()
  } finally {
    requestLoading = false
  }
}

const handMy = () => {
  router.push({
    path: '/my'
  })
}
</script>

<template>
  <div
    class="user-info"
    @mouseleave="handleMouseLeave"
    @mouseout="handMouseOut"
  >
    <div class="norem-drop-list">
      <div class="norem-size-ruler" ref="sizeRuler">
        <div class="norem-user-info-panel">
          <div class="norem-name">{{ userInfo.nickname }}</div>
          <div class="enum">
            <div class="norem-item" @click="handSign">
              <i class="esayIcon esayIcon-qiandao"></i>
              <span class="norem-label">签到</span>
              <span class="norem-value">
                <template v-if="userInfo.is_sign">
                  {{ userInfo.signDay }}连签
                </template>
                <template v-else>未签到</template>
              </span>
            </div>
            <div class="norem-item" @click="handMy">
              <i class="esayIcon esayIcon-renwu"></i>
              <span class="norem-label">每日任务</span>
              <span class="norem-value">去完成</span>
            </div>
            <div class="norem-item" @click="handMy">
              <div class="icon">
                <i class="esayIcon esayIcon-yingbi-qian_danxian"></i>
              </div>
              <span class="norem-label">软妹币</span>
              <span class="norem-value">{{ userInfo.integral }}</span>
            </div>
            <div class="norem-item" @click="handMy">
              <div class="icon">
                <i class="esayIcon esayIcon-xiaji"></i>
              </div>
              <span class="norem-label">我的下级</span>
              <span class="norem-value">{{ userInfo.childercount }}</span>
            </div>
            <div class="norem-item" @click="handMy">
              <div class="icon">
                <i class="esayIcon esayIcon-shoucang"></i>
              </div>
              <span class="norem-label">我的收藏</span>
              <span class="norem-value">{{ userInfo.childercount }}</span>
            </div>
            <div class="norem-item" @click="handMy">
              <div class="icon">
                <i class="esayIcon esayIcon-tougao"></i>
              </div>
              <span class="norem-label">我的投稿</span>
              <span class="norem-value">{{ userInfo.childercount }}</span>
            </div>
          </div>
          <div class="norem-out" @click="handOut">退出登录</div>
        </div>
      </div>
    </div>
    <div
      class="norem-avatar"
      :style="{ backgroundImage: `url(${userInfo.avatar})` }"
    ></div>
  </div>
</template>

<style scoped lang="scss">
.user-info {
  position: relative;

  .norem-avatar {
    //background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.f94b9202d33f187002be09f1cf3be3ec?rik=X4t9O3gfB%2fiOAg&riu=http%3a%2f%2fimg.sucaijishi.com%2fuploadfile%2f2023%2f0221%2f20230221013648837.png%3fimageMogr2%2fformat%2fjpg%2fblur%2f1x0%2fquality%2f60&ehk=IhQfM%2f3PYN1uDUJRn7%2f%2bEuIvhjz1tvEZM03WatipHxE%3d&risl=&pid=ImgRaw&r=0');
    background-color: #e5e9ef;
    background-size: cover;
    background-position: 50%;
    height: 34px;
    width: 34px;
    margin: 8px 20px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.22, 0.58, 0.12, 0.98);
    position: relative;
  }

  .norem-drop-list {
    position: absolute;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.16);
    left: 50%;
    top: 100%;
    transform: translate(-50%);
    transition-duration: 0.2s;
    width: 180px;
    height: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.22, 0.58, 0.12, 0.98);
  }

  .norem-size-ruler {
    width: 180px;

    .norem-user-info-panel {
      padding: 0 20px 35px 20px;
      transition: all 0.5s cubic-bezier(0.22, 0.58, 0.12, 0.98);

      .norem-name {
        font-size: 16px;
        text-overflow: ellipsis;
        text-align: center;
      }

      .enum {
        .norem-item {
          padding: 5px 0;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.56);
          margin-top: 5px;
          cursor: pointer;

          .norem-icon {
            height: 14px;
            margin-right: 4px;
            width: 14px;
          }

          i {
            margin-right: 5px;
          }

          .norem-label {
            flex: 1;
            line-height: 1;
          }
        }
      }

      .norem-out {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #f4f4f4;
        color: rgba(0, 0, 0, 0.56);
        padding: 6px 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        border-radius: 0 0 4px 4px;
        cursor: pointer;
      }
    }
  }

  &:hover {
    .norem-avatar {
      box-shadow: 0 0 1em 0.1em rgba(35, 173, 229, 0.3);
      transform: scale(1.8);
      transform-origin: 50% 0;

      &:before {
        animation: wave-splashing-avatar-31ce2e23 0.4s
          cubic-bezier(0.22, 0.58, 0.12, 0.98);
        background-color: #32aaff;
        border-radius: 50%;
        content: '';
        display: block;
        height: 100%;
        opacity: 0;
        position: relative;
        width: 100%;
      }
    }

    .norem-drop-list {
      height: 300px;
    }

    .norem-size-ruler {
      display: block;

      .norem-user-info-panel {
        padding-top: 35px;
      }
    }
  }
}
</style>
